<template>
  <!-- 地址 -->
  <div class="position">
    <span class="iconfont icon-address"></span>
    华南师范大学南海校区E号楼4层
    <span class="iconfont icon-Bell"></span>
  </div>
  <!-- 搜索框 -->
  <div class="search">
    <input
      class="search__input"
      placeholder="请输入商铺名称"
      v-model="query"
    />
    <span v-show="query" class="iconfont icon-qingkong" @click="clear"></span>
    <span class="iconfont icon-search"></span>
  </div>

  <div class="search__shop">
    <ul v-show="query">
      <router-link
        :to="`/shop/${p._id}`"
        v-for="(p, index) of shopList"
        :key="index"
      >
        <li>
          {{ p.name }}
        </li>
      </router-link>
    </ul>
  </div>
  <!-- 图片 -->
  <div class="banner">
    <img
      class="banner__img"
      src="http://www.dell-lee.com/imgs/vue3/banner.jpg"
    />
  </div>
  <!-- 十个图标 -->
  <div class="icons">
    <div class="icons__item" v-for="(item, index) in iconsList" :key="index">
      <img
        class="icons__item__img"
        v-lazy="`http://www.dell-lee.com/imgs/vue3/${item.imgName}.png`"
      />
      <p class="icons__item__desc">{{ item.desc }}</p>
    </div>
  </div>
  <!-- 灰色部分 -->
  <div class="gap"></div>
</template>

<script>
import { computed, ref } from "@vue/reactivity";
import { get } from "../../utils/request";
import { watch } from "@vue/runtime-core";
import { debounce } from "throttle-debounce";

//获取附近店铺名称逻辑
const useNearbyListEffect = () => {
  let nearbyList = ref([]);
  const getNearbyList = () => {
    get("/api/shop/hot-list").then(function (response) {
      if (response.data) {
        nearbyList.value = response.data;
      }
    });
  };
  return { nearbyList, getNearbyList };
};

export default {
  name: "StaticPart",
  setup() {
    const iconsList = [
      { imgName: "超市", desc: "超市便利" },
      { imgName: "菜市场", desc: "菜市场" },
      { imgName: "水果店", desc: "水果店" },
      { imgName: "鲜花", desc: "鲜花绿植" },
      { imgName: "医药健康", desc: "医药健康" },
      { imgName: "家居", desc: "家居时尚" },
      { imgName: "蛋糕", desc: "烘培蛋糕" },
      { imgName: "签到", desc: "签到" },
      { imgName: "大牌免运", desc: "大牌免运" },
      { imgName: "红包", desc: "红包套餐" },
    ];

    const query = ref("");
    watch(
      query,
      debounce(500, ()=>{})
    );

    const clear = () => {
      query.value = "";
    };

    const { nearbyList, getNearbyList } = useNearbyListEffect();
    getNearbyList();

    const shopList = computed(() => {
      return nearbyList.value.filter((p) => {
        return p.name.indexOf(query.value) !== -1;
      });
    });

    return { iconsList, query, clear, nearbyList, shopList };
  },
};
</script>

<style lang="scss" scoped>
.position {
  position: relative;
  font-size: 0.16rem;
  line-height: 0.22rem;
  color: #333333;
  padding: 0.16rem 0.24rem 0.16rem 0;
  // background-color: pink;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  .icon-address {
    font-size: 0.2rem;
  }
  .icon-Bell {
    position: absolute;
    top: 0.17rem;
    right: 0;
    font-size: 0.2rem;
  }
}

.search {
  position: relative;
  vertical-align: middle;
  // background-color: yellow;
  background: #f5f5f5;
  height: 0.32rem;
  line-height: 0.32rem;
  border-radius: 0.16rem;
  margin-bottom: 0.12rem;
  font-size: 0.14rem;
  color: #b7b7b7;
  .icon-search {
    font-size: 0.16rem;
    position: absolute;
    top: 0;
    right: 0.15rem;
  }
  &__input {
    border: none;
    outline: none;
    background: none;
    width: 80%;
    color: #333;
    margin-left: 0.2rem;
  }
  .icon-qingkong {
    position: absolute;
    top: 0;
    right: 0.4rem;
  }
}

.search__shop {
  background-color: #fff;
  position: absolute;
  top: 0.86rem;
  left: 0.4rem;
  z-index: 2;
  width: 74%;
  vertical-align: middle;
  color: #333;
  font-size: 0.1rem;
  ul {
    padding: 0;
    margin: 0;
    li {
      height: 0.32rem;
      line-height: 0.32rem;
      list-style: none;
      border-bottom: 0.01rem solid #f1f1f1;
      color: #333;
    }
    li:last-child {
      border-bottom: none;
    }
  }
  a {
    text-decoration: none;
  }
}

.banner {
  position: relative;
  height: 0;
  overflow: hidden;
  padding-bottom: 25.4%;
  &__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.icons {
  margin-top: 0.16rem;
  display: flex;
  // background-color: pink;
  flex-wrap: wrap;
  font-size: 0.12rem;
  &__item {
    width: 20%;
    &__img {
      display: block;
      width: 0.4rem;
      height: 0.4rem;
      margin: 0 auto;
    }
    &__desc {
      margin: 0.06rem 0 0.16rem 0;
      text-align: center;
      color: #333333;
    }
  }
}

.gap {
  margin: 0 -0.18rem; //向外撑满
  height: 0.1rem;
  background: #f1f1f1;
}
</style>
